import PropTypes from 'prop-types';
import './index.less';

function MyException({ img, text, description }) {
	const [time, setTime] = useState(3);
	// 返回
	function backHome() {
		location.href = location.origin;
	}

	useEffect(() => {
		// 倒计时返回
		const setBackHome = setInterval(() => {
			if (time < 1) {
				clearInterval(setBackHome);
				backHome();
			} else {
				setTime(time - 1);
			}
		}, 1000);
	}, [time]);

	return (
		<div className="my-exception">
			<div className="my-exception__img">
				<img src={img} alt="" />
			</div>
			<div className="my-exception__content">
				{text && <div className="my-exception__text">{text}</div>}
				{description && <div className="my-exception__desc"> {description} </div>}
				<div className="my-exception__actions">
					{time}秒后自动
					<Button type="link" onClick={backHome}>
						返回
					</Button>
					首页
				</div>
			</div>
		</div>
	);
}

MyException.propTypes = {
	img: PropTypes.string,
	text: PropTypes.string,
	description: PropTypes.string
};

export default MyException;
